<template>
	<view class="cart">
		<view class="cartList">
			<view class="cartItem" v-for="i in 2">
				<!-- 选中，不选中 -->
				<text class="iconfont icon-xuanzhong"></text>

				<!-- 商品信息 -->
				<view class="goodsItem">
					<image src="" mode=""></image>
					<view class="goodsInfo">
						<view class="name">商品信息</view>
						<view class="price">￥ 999</view>
					</view>
				</view>
				<!-- 数量控制 -->
				<view class="countCtrl">
					<text class="sub">-</text>
					<text class="count">2</text>
					<text class="add">+</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<text class="iconfont icon-xuanzhong"></text>
				<text>已选 2</text>
			</view>
			<view class="right">
				<view class="btn">合计：￥ 999</view>
				<view class="btn order">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="stylus">
	
.cart
	background-color #f4f4f4
	height 100%
	.cartList
		.cartItem
			position relative
			height 172rpx
			width 100%
			margin-top 20rpx
			background-color #fff
			padding 20rpx
			display flex
			.iconfont
				font-size 40rpx
				line-height 172rpx
			.goodsItem
				display flex
				image
					width 172rpx
					height 172rpx
					background-color #ccc
					margin 0 40rpx
				.goodsInfo
					.name
						font-size 26rpx
						margin 10rpx
					.price
						color red
			.countCtrl
				position absolute
				right 60rpx
				bottom 30rpx
				text
					border 1px solid #ddd
					padding 8rpx 28rpx
					&:nth-child(2)
						border none
						border-top 1px solid #ddd
						border-bottom 1px solid #ddd
	.footer
		position fixed
		bottom 0
		left 0
		right 0
		height 100rpx
		line-height 100rpx
		background #fff
		display flex
		justify-content space-between
		border-top: 1rpx solid #ccc
		.iconfont
			margin: 0 20rpx
		.right
			display: flex
			.btn
				flex: 1
				width: 200rpx
				display: inline-block
				&.order
					background: #dd1a21
					text-align: center
					color: #fff
			
</style>
